<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,.comp-b,.comp-c{
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <!-- <div dataIndex="1231"></div> -->
    <!-- 根组件 -->
    <div id="app">
        <p>count:{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <hr>    

        <laowang-a :a="count"></laowang-a>
        <laowang-b :a="count"></laowang-b>
        <laowang-c v-if="isShow" :a="count"></laowang-c>
        <button @click="isShow=!isShow">isShow</button>
       
    </div>
</body>
<script>
    /*  
        Vue组件的生命周期(更新阶段)
            (1) 组件自身的数据更新  => 组件自身进入更新阶段
            (2) 父组件给子组件传递数据更新,  1. 父组件先进入更新阶段  => 在将模板解析为虚拟DOM 解析过程中,子组件也会进入更新阶段  !!


        单向数据流: 
            数据单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。   
            默认情况下, 父组件给子组件传入的数据, 子组件不能直接更改, 即便修改,父组件给子组件传入数据更新,还是会被覆盖

            结论: 父组件给子组件传递的数据, 子组件不能直接改 !!!
            1.  不需要修改父组件传入的数据,子组件直接拿来用 (不改,直接用)
            2.  如果要修改父组件传入的数据, 可以使用计算属性 computed (派生值/衍生值)
            3.  将父组件传入的数据作为子组件的初始值!!
    
    */


   
    // 问题演示 
    // 1. 父组件给子组件传入数据, 子组件修改,只有子组件更新了(还报了警告!!), 父组件没有更新
    Vue.component("laowang-a",{
        props:["a"],
        template:`<div id="A" class="comp-a">
                    <p>这是A组件: {{a}}</p>
                    <p><button @click="a++">a++</button></p>
                </div>`,
        created () {
            console.log("子组件A",this);    
            console.log("子组件A",this.$props);    
        },
        beforeUpdate () {
            console.log("子组件 beforeUpdate");
        },
        updated () {
            console.log("子组件 updated");
        }
    })

    // 子组件根据父组件传入的数据得到一个计算属性(派生值/衍生值),  当父组件传入的数据改变, 子组件计算属性同步更新
    Vue.component("laowang-b",{
        props:["a"],
        template:`<div id="b" title="hello comp-b" class="comp-b" style="font-size:20px">
                    <p>这是B组件 a: {{a}}</p> 
                    <p>这是B组件 2a: {{doubleA}}</p> 
                </div>`,
        computed: {
            doubleA:function(){
                return this.a * 2;
            }
        },
        created () {
            console.log("子组件B",this);    
            console.log("子组件B",this.$props);    
        }
    })

    // 子组件初始化渲染时, 接收父组件传入的数据,作为子组件自身数据的初始值 (默认只执行一次)
    Vue.component("laowang-c",{
        props:["a"],
        data:function(){   
            return {
                A: this.a
            }
        },
        template:`<div id="c" title="hello comp-c" class="comp-c" style="font-size:20px">
                    <p>这是C组件: {{A}}</p> 
                    <p><button @click="A++">A++</button></p> 
                </div>`,
        created () {
            console.log("子组件C",this);    
            console.log("子组件C $props",this.$props);    
        }
    })
   

    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el:"#app",
        data:{
            isShow:true,
            count:1,
        },
        beforeUpdate () {
            console.log("父组件 beforeUpdate");
        },
        updated () {
            console.log("父组件 updated");
        }
    })



</script>
</html>